// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// 
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// 
//     http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

$color: #333;
$bgColor: #f5f5f5;
$primary: #4a90e2;
$border-radius: 4px;
$padding: 20px;

body {
  margin: 0;
  color: $color;
  background-color: $bgColor;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.root {
  display: flex;
  padding: $padding;
  gap: 30px;

  #configs {
    flex:1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: white;
    border-radius: $border-radius;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-weight: 500;

      &:has(input[type='checkbox']) {
        flex-direction: row;
        align-items: center;
        gap: 8px;
      }
    }

    select,
    input[type='checkbox'] {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: $border-radius;
      width: 100%;

      &:focus {
        outline: none;
        border-color: $primary;
      }

      &[multiple] {
        height: 70px;
      }
    }

    input[type='checkbox'] {
      width: auto;
      margin: 0;
      cursor: pointer;
    }
  }

  #chart {
    width: 70vw;
    height: 49vw;
    background: white;
    border-radius: $border-radius;
    // padding: $padding;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
